<template>
  <div class="project-main">
    <div class="content">
      <div class="header">
        <span class="title">事项详情查看</span>
        <span class="back" @click="$router.go(-1)">返回</span>
      </div>
      <div class="title-info">
        基础信息
      </div>
      <div class="tips">
        <span>填报单位：{{ info.file_unit }}</span>
        <span>负责人：{{ info.file_people }}</span>
        <span>上传时间：{{ info.upload_time }}</span>
      </div>
      <div class="title-info" v-if="notToExamine.includes(type)">
        审核相关节点
      </div>
      <div class="progress clearfix" v-if="notToExamine.includes(type)">
        <div class="e-name">
          <p>审核事项</p>
          <p>
            {{ tipsText == "深入论证" ? "深入论证" : "《" + tipsText + "》" }}
          </p>
        </div>
        <ul class="step-box">
          <li class="">
            <p class="p1">发起人及时间</p>
            <p :class="['p2', info.file_people ? 'active' : '']">
              <span class="yuan"></span> <span class="line"></span>
            </p>
            <p class="p3">
              {{ info.file_people }}
            </p>
            <p class="p4">{{ info.upload_time }}</p>
          </li>
          <li class="">
            <p class="p1">审核人及时间</p>
            <p :class="['p2', info.file_audit_people ? 'active' : '']">
              <span class="yuan"></span> <span class="line"></span>
            </p>
            <p class="p3" v-if="info.file_audit_people">
              {{
                info.file_audit_people.split("/")[
                  info.file_audit_people.split("/").length - 1
                ]
              }}
            </p>
            <p class="p4">{{ info.file_audit_time }}</p>
          </li>
          <li class="">
            <p class="p1">审核结果</p>
            <p
              :class="[
                'p2',
                info.file_audit_status && info.file_audit_status != 4
                  ? 'active'
                  : '',
              ]"
            >
              <span class="yuan"></span>
            </p>
            <p class="p3" v-if="info.file_audit_people">
              {{
                info.file_audit_people.split("/")[
                  info.file_audit_people.split("/").length - 1
                ]
              }}
            </p>
            <p class="p4">
              <el-tooltip
                class="item"
                effect="light"
                :content="info.file_audit_message"
                placement="right"
                v-if="
                  info.file_audit_status == 0 ||
                    info.file_audit_status == 2 ||
                    info.file_audit_status == 3
                "
              >
                <p class="i-t">
                  <span>
                    {{
                      info.file_audit_status == 0
                        ? "暂停"
                        : info.file_audit_status == 1
                        ? "通过"
                        : info.file_audit_status == 2
                        ? "终止"
                        : info.file_audit_status == 3
                        ? "驳回"
                        : info.file_audit_status == 4
                        ? "待审核"
                        : ""
                    }}
                  </span>
                  <br />
                  <img src="~@img/project/icon-redtip.png" alt="" />
                </p>
              </el-tooltip>
            </p>
            <div class="p4">
              <p
                class="i-t"
                v-if="
                  info.file_audit_status == 1 || info.file_audit_status == 4
                "
              >
                <span>
                  {{
                    info.file_audit_status == 0
                      ? "暂停"
                      : info.file_audit_status == 1
                      ? "通过"
                      : info.file_audit_status == 2
                      ? "终止"
                      : info.file_audit_status == 3
                      ? "驳回"
                      : info.file_audit_status == 4
                      ? "待审核"
                      : ""
                  }}
                </span>
              </p>
            </div>
          </li>
        </ul>
      </div>
      <div v-if="tipsText == '重点项目专题报告'">
        <div class="progress-tips">
          建立专班批示信息：
        </div>
        <div class="progress-content">
          {{ info.file_audit_message }}
        </div>
        <div class="files">
          <!-- file3_url   《批示文件》 -->
          <p class="name">
            <img
              v-if="
                info.file3_name.split('.')[
                  info.file3_name.split('.').length - 1
                ] == 'xls' ||
                  info.file3_name.split('.')[
                    info.file3_name.split('.').length - 1
                  ] == 'xlsx'
              "
              src="~@img/upload/icon-excel.png"
              alt=""
            />
            <img
              v-if="
                info.file3_name.split('.')[
                  info.file3_name.split('.').length - 1
                ] == 'pdf'
              "
              src="~@img/upload/icon-pdf.png"
              alt=""
            />
            <img
              v-if="
                info.file3_name.split('.')[
                  info.file3_name.split('.').length - 1
                ] == 'docx'
              "
              src="~@img/upload/icon-word.png"
              alt=""
            />
            <span>{{ info.file3_name }}</span>
          </p>
          <p class="text img111" @click="goFile">
            <img src="~@img/project/icon-eye.png" alt="" />
            <span>预览</span>
          </p>
          <p class="text img111" @click="downFile">
            <img src="~@img/project/icon-download.png" alt="" />
            <span>下载</span>
          </p>
        </div>
      </div>
      <div class="title-info">
        {{ tipsText == "深入论证" ? "论证文件" : tipsText }}
      </div>
      <div :class="['pdf-box', tipsText == '重点项目专题报告' ? 'h-260' : '']">
        <!-- v-if="info.file_url" -->

        <div :class="['pdf', isFull ? 'isAll' : '']">
          <div v-if="!isFull" class="full" @click="isFull = true">全屏</div>
          <div v-if="isFull" class="exit" @click="isFull = false">退出全屏</div>
          <!--  :src="info.file" -->
          <!-- <iframe
            v-if="info.file_url.indexOf('.pdf') == -1"
            ref="ifRame"
            style="margin-top:30px;"
            :src="
              'https://view.officeapps.live.com/op/view.aspx?src=' +
                info.file_url
            "
            frameborder="0"
          ></iframe> -->
          <!-- <iframe
            v-if="info.file_url.indexOf('.pdf') != -1"
            ref="ifRame"
            style="margin-top:30px;"
            :src="info.file_url"
            frameborder="0"
          ></iframe> -->
          <iframe
            ref="ifRame"
            style="margin-top:30px;"
            :src="info.file_url"
            frameborder="0"
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { CheckProjectFile } from "@api/project/detail";
export default {
  data() {
    return {
      isFull: false,
      info: {},
      tipsText: "",
      notToExamine: [2, 3, 5, 9, 10, 13, 20],
      progress: [
        "项目投资意向书",
        "项目立项审批单",
        "重点项目专题报告",
        "项目目标管理计划书",
        "深入论证",
        "项目合作协议（初稿）",
        "项目合作协议（修改稿）",
        "签约项目协议合法性审查意见",
        "太原市公平竞争审查表",
        "项目合作协议（送审稿）",
        "项目合作协议",
        "完成情况申请验收表",
        "完成情况验收表",
        "申请终止（结转）审批表",
      ],
      id: "",
      type: "",
      status: "",
    };
  },

  mounted() {
    let file_type_list = [
      { name: "信息台账", type: 1 },
      {
        name: "项目投资意向书",
        type: 2,
      },
      {
        name: "项目立项审批单",
        type: 3,
      },
      {
        name: "项目化台账",
        type: 4,
      },
      {
        name: "重点项目专题报告",
        type: 5,
      },
      {
        name: "项目专班",
        type: 6,
      },
      {
        name: "项目目标管理计划书",
        type: 7,
      },
      {
        name: "深入论证",
        type: 8,
      },
      {
        name: "项目合作协议（初稿）",
        type: 9,
      },
      {
        name: "项目合作协议（修改稿）",
        type: 10,
      },

      {
        name: "签约项目协议合法性审查意见",
        type: 11,
      },
      {
        name: "太原市公平竞争审查表",
        type: 12,
      },
      {
        name: "项目合作协议（送审稿）",
        type: 13,
      },
      {
        name: "综合审查",
        type: 14,
      },
      {
        name: "项目合作协议",
        type: 15,
      },
      {
        name: "综合审批",
        type: 16,
      },
      {
        name: "代办手续",
        type: 17,
      },
      {
        name: "完成情况申请验收表",
        type: 18,
      },
      {
        name: "完成情况验收表",
        type: 19,
      },
      {
        name: "申请终止（结转）审批表",
        type: 20,
      },
    ];

    let { type, id, status } = { ...this.$route.params };
    this.id = id;
    this.type = type;
    this.status = status;
    file_type_list.map((item) => {
      item.type == type ? (this.tipsText = item.name) : "";
    });
    this.getCheckProjectFile();
  },
  methods: {
    goFile() {
      if (this.info.file3_url == null) {
        this.$message.warning("暂无文件");
      }
      if (this.info.file3_url) {
        let routeUrl = this.$router.resolve({
          name: "files",
          query: {
            url: this.info.file3_url,
          },
        });
        window.open(routeUrl.href, "_blank");
      }
    },
    downFile() {
      console.log(this.info.file3_url);
      if (this.info.file3_url == null) {
        this.$message.warning("暂无文件");
      }
      // window.open();
      let file_url = this.info.file3_url;
      if (file_url.includes(".pdf")) {
        let url = file_url.replace(
          "https://zysf-store.oss-cn-beijing.aliyuncs.com",
          "/file"
        );
        let fileName = url.split("/")[url.split("/").length - 1];
        console.log(fileName);
        this.$axios({
          method: "get",
          // params: { fileId: this.fileId },
          url: url, // 下载文件接口地址
          // 文件流
          responseType: "blob",
        })
          .then((res) => {
            console.log(res);
            let url1 = window.URL.createObjectURL(new Blob([res.data]), {
              type: "application/pdf",
            });
            // 生成一个a标签
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url1;
            console.log(url1);
            // 生成时间戳
            let timestamp = new Date().getTime();
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
          })
          .catch(() => {});
      } else {
        window.open(file_url);
      }
    },
    async getCheckProjectFile() {
      let res = await CheckProjectFile({
        file_type: this.type,
        project_id: this.id,
      });
      if (res.code && res.code == 0) {
      } else {
        // console.log(window.location.origin);
        // console.log(window.location.origin + "/#/files?url=" + res.file_url);
        this.info = {
          ...res,
          file_url: res.file_url
            ? window.location.origin + "/#/files?url=" + res.file_url
            : "",
        };
      }
    },
    save() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
.project-main {
  background: #fafafa;
  height: 100%;
  overflow: hidden;
  text-align: left;
}
.content {
  padding: 0 30px;
  margin: 0 auto;
  max-width: 1500px;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(189, 189, 189, 0.6);
  overflow: hidden;
}
.header {
  position: relative;
  height: 60px;
  line-height: 60px;
  border-bottom: 4px solid rgba(204, 204, 204, 0.35);
  span.title {
    display: inline-block;
    height: 60px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
    cursor: default;
  }
  span.back {
    position: absolute;
    right: 0;
    top: 9px;
    width: 100px;
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    background: #5889dc;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
}
.tips {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  line-height: 30px;
  span {
    margin: 0 118px 0 0;
  }
}
.title-info {
  line-height: 60px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
.progress {
  height: 160px;
  cursor: default;
  .e-name {
    padding: 40px 0;
    width: 260px;
    height: 160px;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    p {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }
    p:last-of-type {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
    }
  }
  .step-box {
    float: left;
    height: 160px;
    width: 600px;
    display: flex;
    justify-content: space-between;
    li {
      padding: 20px 0 0;
      width: 140px;
      text-align: center;
      .p1 {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }
      .p2 {
        position: relative;
        margin: 10px auto;
        width: 32px;
        height: 32px;
        background: #ccc;
        border-radius: 50%;
        span.yuan {
          display: inline-block;
          margin-top: 6px;
          width: 20px;
          height: 20px;
          background: #f5f5f5;
          border-radius: 50%;
        }

        span.line {
          position: absolute;
          top: 14px;
          left: 47px;
          width: 150px;
          height: 4px;
          background: #eeeeff;
          border-radius: 2px;
        }
      }
      .p2.active {
        background: #5889dc;
        span.yuan {
          background: #eaf1fd;
        }
      }
      .p3,
      .p4 {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
      }
    }
  }
}
.pdf-box {
  height: 360px;
  border: 1px solid #666;
}

.pdf {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 999;
  iframe {
    margin-top: 0 !important;
    width: 100%;
    height: 100%;
  }
  .full {
    position: absolute;
    top: 70px;
    right: 150px;
    width: 60px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 10px;
    color: #fff;
    background-color: #5889dc;
    z-index: 999;
    cursor: pointer;
  }
  .exit {
    position: absolute;
    top: 70px;
    right: 40px;
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #5889dc;
    z-index: 999;
    border-radius: 10px;
    cursor: pointer;
  }
}
.isAll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.progress-tips {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  line-height: 34px;
  opacity: 0.8;
}
.progress-content {
  margin: 4px 0;
  padding-left: 12px;
  line-height: 32px;
  min-height: 32px;
  background: #f7f7f7;
  border: 1px solid #cccccc;
  opacity: 0.85;
  border-radius: 5px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}
.files {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  p {
    float: left;
    img,
    span {
      vertical-align: middle;
    }
    &.name {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      span {
        margin: 0 10px 0 10px;
      }
    }
    &.text {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      cursor: pointer;
      img {
        margin-right: 4px;
        margin-left: 20px;
      }
      &:hover {
        color: #5889dc;
      }
    }
  }
}
.pdf-box.h-260 {
  height: 260px;
}
.i-t {
  img,
  span {
    vertical-align: middle;
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .pdf-box.h-260 {
    height: 220px;
  }
  .pdf-box {
    height: 290px;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .pdf-box.h-260 {
    height: 180px;
  }
  .pdf-box {
    height: 240px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .pdf-box.h-260 {
    height: 220px;
  }
  .pdf-box {
    height: 290px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .pdf-box.h-260 {
    height: 320px;
  }
  .pdf-box {
    height: 390px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .title-info {
    line-height: 40px;
  }
  .tips {
    line-height: 20px;
  }
  .progress-tips {
    line-height: 16px;
  }
  .pdf-box {
    height: 240px;
    border: 1px solid #666;
  }
  .pdf-box.h-260 {
    height: 200px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .progress {
    height: 130px;
  }
  .progress .e-name {
    height: 130px;
  }
  .progress .step-box {
    height: 130px;
    li {
      padding: 0;
    }
  }
  .pdf-box {
    height: 230px;
    border: 1px solid #666;
  }
}
</style>
